<template>
    <div>
       <header><van-icon  class="headericon" name="arrow-left" @click="handleBackPage"/><span>登录</span></header>
       <main>
           <div class="touxiangbg">
               <div></div>
           </div>
           <div class="forform">
               <van-form @submit="onSubmit">
                    <van-field
                        v-model="username"
                        name="username"
                        label="用户名："
                        placeholder="请输入用户名"
                        :rules="[{ required: true, message: '请填写用户名' }]"
                    />
                    <van-field
                        v-model="password"
                        type="password"
                        name="password"
                        label="密码："
                        placeholder="请输入密码"
                        :rules="[{ required: true, message: '请填写密码' }]"
                    />
                    <div>
                        <van-button round block type="info" native-type="submit">提交</van-button>
                    </div>
                </van-form>
               <button @click="handleRegister">注册</button>
           </div>
       </main>
    </div>
</template>

<script>
    export default {
        data() {
            return {
            username: '',
            password: '',
            };
        },
        methods: {
            onSubmit(values) {
                // console.log('submit', values);
                this.$store.dispatch('huang/userLoginAct',values);
            },
            handleRegister(){
                this.$router.push("/register")
            },
        },
    };
</script>

<style lang="less" scoped>
    @allcolor:#f57537;
    header{
        width:100%;
        height:.4rem;
        background: @allcolor;
        color: white;
        text-align: center;
        padding: 0 .1rem;
        box-sizing: border-box;
        line-height: .4rem;
        font-size: .2rem;
        .headericon{
            float:left;
            margin-top:.1rem;
            // display: inline-block
            
        }
    }
    main{
        padding: 0 0.1rem;
        .touxiangbg{
            width: 100%;
            height:1.8rem;
            display: flex;
            justify-content: center;
            align-items: center;
            border-bottom:.01rem solid #aaa ;
            div{
                width:1.5rem;
                height:1.5rem;
                border: .01rem solid #bbb;
                border-radius:50%;
                background: url('../assets/img/login-face.png') center center;
                background-size:cover ;
            }
        }
        .forform{
            .van-cell{
                padding: .16rem .06rem;
                border-bottom:.01rem solid #aaa ;

            }
            .van-button{
                background:#ff5401;
                border-radius: .02rem;
                border: .01rem solid #ff0f00;
                font-size: .18rem;
                margin:.1rem 0;
                height: .44rem;
            }
            button{
                width:100%;
                height: .44rem;
                background: #f9f7ea;
                font-size: .18rem;
                border: .01rem solid @allcolor;
            }
        }
    }
</style>